﻿.emaillabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color:yellow; /* color text yellow */
    top:5%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.emailbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color: blue; /* color text blue */
    top:35%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.emailbutton {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 70%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.newpasswordlabel {
    position:absolute; /* Absolute position so the control can be placed acording to parent div */
    color:yellow; /* color text yellow */
    top:38%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.oldpasswordlabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color:yellow; /* color text yellow */
    top:5%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.repeatpasswordlabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color:yellow; /* color text yellow */
    top:70%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.newpasswordbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color: blue; /* color text blue */
    top:50%;  /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.oldpasswordbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color: blue; /* color text blue */
    top:20%;  /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.repeatpasswordbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color: blue; /* color text blue */
    top:80%;   /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

.fileupload {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 30%; /* procentage from top of div */
    left: 23%; /* procentage from left of div */
    color:yellow; /* color text yellow */
}

.profimage {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 10%; /* procentage from top of div */
    width: 50px; /* width of control */
    height: 50px; /* height of control */
    left: 5%; /* procentage from left of div */
}

#changepassdiv {  /* div for the password controls */
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top:28%; /* procentage from top of div */
    left: 32%; /* procentage from left of div */
    width: 15%; /* width of control */
    height:20%; /* height of control */
}

.passbutton {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 95%; /* procentage from top of div */
    left: 2%; /* procentage from left of div */
}

#changeemaildiv {  /* div for the email controls */
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top:28%; /* procentage from top of div */
    width:15%; /* width of control */
    height:10%; /* height of control */
}

#profilediv {  /* div for the profile controls  */
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top:39%; /* procentage from top of div */
    width:15%; /* width of control */
    height:10%; /* height of control */
}

#changecarddiv {  /* div for the credit card controls */
   position:absolute; /* absolute position so the control can be placed acording to parent div */
    top:28%; /* procentage from top of div */
    left: 50%; /* procentage from left of div */
    width:20%; /* width of control */
    height:80%; /* height of control */
}

.profilebutton {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 65%; /* procentage from top of div */
    left: 5%; /* procentage from left of div */
}

.deletebutton {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 55%; /* procentage from top of div */
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;  /* Using CSS3 to create shadow inside the button */
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;  /* Using CSS3 to create shadow inside the border of the button */
	box-shadow:inset 0px 1px 0px 0px #f29c93;  /* part of the shadowing */ 
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) ); /* Using -webkit-gradient to separate the background into two background colors  */
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ); /* Also Using moz gradient to separate the background into two background colors  */
    /* Linear gradients of two colors means that the gradient will change in a straigt line from the first color to the second color  */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100'); /* Used for internet explorer support of gradient colors */
	background-color:#fe1a00; /* background color of button */
	-moz-border-radius:6px; /* Using moz-border-radius to define how round the corners of the button should be */
	-webkit-border-radius:6px; /* Using webkit-border-radius to define how round the corners of the button should be */
	border-radius:6px; /* how big the border should be */
	border:1px solid #d83526; /* soild border and color of the border */
	display:inline-block; /* order all elemets of button in a block display */
	color:#ffffff; /* text color white */
	font-family:arial; /* use this font */
	font-size:15px; /* size of font */
	font-weight:bold; /* make text bold  */
	padding:6px 24px; /* padding defines the size of the box around the text, increasing the first px value will make the button grow bigger vertical and the other one horizontal  */
	text-decoration:none; /* no decoration such as overline,underline,strike through */
	text-shadow:1px 1px 0px #b23e35; /* Shadow on text, first px is horizontal, second vertical, third is the blur and the fourth value is the color of shadow */
}.deletebutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) ); /* When user hover over button change the gradient of the two colors */
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% ); /* When user hover over button change the gradient of the two colors */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00'); /* Used for Internet Explorer support of gradient colors */
	background-color:#ce0100; /* Change the background color slightly */
}.deletebutton:active {
	position:relative;/* position relative to the button so when we click it, the same position will be applied */
	top:1px; /* but 1% from top making a illsuion that the user has interacted with the button */
}

.cardholderlabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 8%; /* procentage from top of div */
    color:yellow; /* color text yellow */
}

.creditnumberlabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 15%; /* procentage from top of div */
    left: 0%; /* procentage from left of div */
    color:yellow; /* color text yellow */
}

.cvclabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color:yellow; /* color text yellow */
    top:29%; /* procentage from top of div */
}

.cardholderbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 11%; /* procentage from top of div */
    color:blue; /* color text blue */
}

.creditnumberbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 18%; /* procentage from top of div */
    left:0%; /* procentage from left of div */
    color:blue; /* color text blue */
}

.cvcbox {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 28%; /* procentage from top of div */
    left:12%; /* procentage from left of div */
    color:blue; /* color text blue */
}

.changecardbutton {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    left: 0%; /* procentage from left of div */
    top:33%; /* procentage from top of div */
}

.expirationDateLabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    color: yellow; /* color text yellow */
    left: 0%; /* procentage from left of div */
    top:23%; /* procentage from top of div */
}

.cardTypelabel {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 1%; /* procentage from top of div */
    color:yellow; /* color text yellow */
}

.cardlist {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 4%; /* procentage from top of div */
}

.expmonth {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 23%; /* procentage from top of div */
    left: 27%; /* procentage from left of div */
}

.expyear {
    position:absolute; /* absolute position so the control can be placed acording to parent div */
    top: 23%; /* procentage from top of div */
    left: 40%; /* procentage from left of div */
}

.validationcard {
    position:relative;
    color: yellow; /* color text yellow */
    float:right;
    top: 35%;
    left: -40%;
}

.validationprofile {
    position:relative;
    color: yellow; /* color text yellow */
    float:right;
    top: 100%;
    left: -25%;
}

.validationemail {
    position:relative;
    color: yellow; /* color text yellow */
    float:right;
    top: 100%;
    left: -25%;
}

.validationpassword {
    position:relative;
    color: yellow; /* color text yellow */
    float:right;
    top: 120%;
    left: -45%;
}

